<template>
  <view class="wrap">
    <view class="backImage">
      <image src="../../static/interImage.png" mode="widthFix" class="img"></image>
    </view>
    <view class="box">
      <view class="hd">
        <uv-navbar :fixed="false" title="添加参会人" autoBack safeAreaInsetTop placeholder :border='false' bg-color="rgba(0,0,0,0)" titleStyle='color: #FFFFFF' leftIconColor='#FFFFFF'></uv-navbar>
        <view class="search">
          <uv-input v-model="searchValue" placeholder="输入完整手机号搜索添加用户" maxlength='11' border="none" autoBlur fontSize='28rpx' color='#FFFFFF' confirmType='search' placeholderStyle='font-size: 28rpx; color: #FFFFFF' :customStyle="{height: '92rpx'}" @confirm='getList'>
            <template v-slot:suffix>
              <uv-icon name='search' size='60rpx' color='#000000' @click="getList"></uv-icon>
            </template>
          </uv-input>
        </view>
      </view>
      <view class="center">
        <view class="say">
          <view class="item">
            <view class="test">{{ obj.nickname }}</view>
            <view class="test">{{ obj.mobile }}</view>
          </view>
        </view>
      </view>
      <view class="footer">
        <view class="content">
          <view class='desc'>*添加参会人后视为此用户预约了该会议，</view>
          <view class='desc'>同时会向向该用户发送站内信提醒。</view>
        </view>
        <button class="btn" hover-class="none" @click="addSign">添加到参会清单</button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/common';

let id = '';
let searchValue = ref('');
let obj = ref({});

onLoad((option) => {
  id = option.id;
})

function getList(){
  const params = {
    mobile: searchValue.value
  }
  post('api/survey/searchUser', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      obj.value = data;
    }
  })
}
function addSign(){
  const params = {
    survey_id: id,
    add_user_id: obj.value.id
  }
  post('api/survey/addParticipant', params).then(res => {
    if(res.code == 1){
      toast('添加成功');
      uni.navigateBack({
        delta: 1
      });
    }
  })
}
</script>

<style lang="scss" scoped>
  .box{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
    z-index: 3;
    width: 100%;
    .center{
      flex: 1;
      padding: 0 30rpx;
      padding-top: 20rpx;
      .say{
        background: #FFFFFF;
        box-shadow: 0 5rpx 11rpx 0 #ff706d8c;
        border-radius: 15rpx;
        height: 100%;
        padding: 0 30rpx;
        padding-top: 30rpx;
        .item{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .test{
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }
    }
    .footer{
      width: 100%;
      padding: 0 30rpx;
      padding-top: 16rpx;
      padding-bottom: 30rpx;
      // position: fixed;
      // left: 0;
      // bottom: 0;
      .content{
        padding-bottom: 28rpx;
        padding-top: 46rpx;
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: rgba($color: #FF0000, $alpha: .44);
          text-align: center;
        }
      }
    }
    .hd{
      padding: 0 30rpx;
      .search{
        background-color: rgba(255, 255, 255, 0.67);
        border-radius: 15rpx;
        margin-top: 60rpx;
        padding: 0 30rpx;
      }
    }
  }
  .backImage{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F0F0F0;
  }
</style>